<template>
  <div style="width: 100%; height: 100%; overflow: hidden; position: relative">
    <div
      v-if="
        container.auxiliaryLine.isOpen && container.auxiliaryLine.isShowXLine
      "
      class="auxiliary-line-x"
      :style="{ top: auxiliaryLinePos.y + 'px' }"
    ></div>
    <div
      v-if="
        container.auxiliaryLine.isOpen && container.auxiliaryLine.isShowYLine
      "
      class="auxiliary-line-y"
      :style="{ left: auxiliaryLinePos.x + 'px' }"
    ></div>
    <div
      id="flowContainer"
      class="flow-container"
      :class="{
        grid: flowData.config.showGrid,
        zoomIn: currentTool.type == 'zoom-in',
        zoomOut: currentTool.type == 'zoom-out',
        canScale: container.scaleFlag,
        canDrag: container.dragFlag,
        canMultiple: rectangleMultiple.flag,
      }"
      :style="{
        top: container.pos.top + 'px',
        left: container.pos.left + 'px',
        transform: 'scale(' + container.scale + ')',
        transformOrigin:
          container.scaleOrigin.x + 'px ' + container.scaleOrigin.y + 'px',
      }"
      @click.stop="containerHandler"
      @mousedown="mousedownHandler"
      @mousemove="mousemoveHandler"
      @mouseup="mouseupHandler"
      @mousewheel="scaleContainer"
      @DOMMouseScroll="scaleContainer"
      @contextmenu="showContainerContextMenu"
    >
      <flow-node
        v-for="(node, index) in flowData.nodeList"
        :key="index"
        :node="node"
        :plumb="plumb"
        :select.sync="currentSelect"
        :selectGroup.sync="currentSelectGroup"
        :currentTool="currentTool"
        @showNodeContextMenu="showNodeContextMenu"
        @isMultiple="isMultiple"
        @updateNodePos="updateNodePos"
        @alignForLine="alignForLine"
        @hideAlignLine="hideAlignLine"
      >
      </flow-node>
      <div
        class="rectangle-multiple"
        v-if="rectangleMultiple.flag && rectangleMultiple.multipling"
        :style="{
          top: rectangleMultiple.position.top + 'px',
          left: rectangleMultiple.position.left + 'px',
          width: rectangleMultiple.width + 'px',
          height: rectangleMultiple.height + 'px',
        }"
      ></div>
    </div>
    <div class="container-scale">缩放倍数：{{ container.scaleShow }}%</div>
    <div class="mouse-position">
      x: {{ mouse.position.x }}, y: {{ mouse.position.y }}
    </div>
    <vue-context-menu
      :contextMenuData="containerContextMenuData"
      @flowInfo="flowInfo"
      @paste="paste"
      @selectAll="selectAll"
      @saveFlow="saveFlow"
      @verticaLeft="verticaLeft"
      @verticalCenter="verticalCenter"
      @verticalRight="verticalRight"
      @levelUp="levelUp"
      @levelCenter="levelCenter"
      @levelDown="levelDown"
      @addRemark="addRemark"
    >
    </vue-context-menu>
    <vue-context-menu
      :contextMenuData="nodeContextMenuData"
      @copyNode="copyNode"
      @deleteNode="deleteNode"
    >
    </vue-context-menu>
  </div>
</template>

<script>
import jsplumb from 'jsplumb'
import { flowConfig } from '@/utils/args-config'
import $ from 'jquery'
import 'jquery-ui/ui/widgets/draggable'
import 'jquery-ui/ui/widgets/droppable'
import 'jquery-ui/ui/widgets/resizable'
import { eventMethod } from '@/utils/eventMethod'
import FlowNode from './FlowNode'

export default {
  props: [
    'browserType',
    'flowData',
    'plumb',
    'select',
    'selectGroup',
    'currentTool',
  ],
  components: {
    jsplumb,
    FlowNode,
  },
  mounted () {
    this.initFlowArea()
  },
  data () {
    return {
      ctx: null,
      currentSelect: this.select,
      currentSelectGroup: this.selectGroup,
      container: {
        pos: {
          top: -3000,
          left: -3000,
        },
        dragFlag: false,
        draging: false,
        scale: flowConfig.defaultStyle.containerScale.init,
        scaleFlag: false,
        scaleOrigin: {
          x: 0,
          y: 0,
        },
        scaleShow: eventMethod.mul(
          flowConfig.defaultStyle.containerScale.init,
          100
        ),
        auxiliaryLine: {
          isOpen: flowConfig.defaultStyle.isOpenAuxiliaryLine,
          isShowXLine: false,
          isShowYLine: false,
          controlFnTimesFlag: true,
        },
      },
      auxiliaryLinePos: {
        x: 0,
        y: 0,
      },
      mouse: {
        position: {
          x: 0,
          y: 0,
        },
        tempPos: {
          x: 0,
          y: 0,
        },
      },
      rectangleMultiple: {
        flag: false,
        multipling: false,
        position: {
          top: 0,
          left: 0,
        },
        height: 0,
        width: 0,
      },
      containerContextMenuData: flowConfig.contextMenu.container,
      nodeContextMenuData: flowConfig.contextMenu.node,
      tempLinkId: '',
      clipboard: [],
      listArr: []
    }
  },
  methods: {
    // 初始化域
    initFlowArea () {
      this.ctx = document.getElementById('flowContainer').parentNode
      $('.flow-container').droppable({
        accept: (t) => {
          if (t[0].className.indexOf('node-item') !== -1) {
            let event = window.event || 'firefox'
            if (this.ctx.contains(event.srcElement) || event === 'firefox') {
              return true
            }
          }
          return false
        },
        hoverClass: 'flow-container-active',
        drop: (event, ui) => {
          let belongto = ui.draggable.attr('belongto')
          let type = ui.draggable.attr('type')
          this.$emit('selectTool', 'drag')

          this.$emit('findNodeConfig', belongto, type, (node) => {
            if (!node) {
              this.$message.error('未知的节点类型！')
              return
            }
            this.addNewNode(node)
          })
        },
      })
    },
    mousedownHandler (e) {
      let event = window.event || e
      if (event.button === 0) {
        if (this.container.dragFlag) {
          this.mouse.tempPos = this.mouse.position
          this.container.draging = true
        }

        this.currentSelectGroup = []
        if (this.rectangleMultiple.flag) {
          this.mouse.tempPos = this.mouse.position
          this.rectangleMultiple.multipling = true
        }
      }
    },
    mousemoveHandler (e) {
      let event = window.event || e
      if (event.target.id === 'flowContainer') {
        this.mouse.position = {
          x: event.offsetX,
          y: event.offsetY,
        }
      } else {
        let cn = event.target.className
        let tn = event.target.tagName
        if (
          cn !== 'lane-text' &&
          cn !== 'lane-text-div' &&
          tn !== 'svg' &&
          tn !== 'path' &&
          tn !== 'I'
        ) {
          this.mouse.position.x = event.target.offsetLeft + event.offsetX
          this.mouse.position.y = event.target.offsetTop + event.offsetY
        }
      }
      if (this.container.draging) {
        let nTop =
          this.container.pos.top +
          (this.mouse.position.y - this.mouse.tempPos.y)
        let nLeft =
          this.container.pos.left +
          (this.mouse.position.x - this.mouse.tempPos.x)
        if (nTop >= 0) nTop = 0
        if (nLeft >= 0) nLeft = 0
        this.container.pos = {
          top: nTop,
          left: nLeft,
        }
      }
      if (this.rectangleMultiple.multipling) {
        let h = this.mouse.position.y - this.mouse.tempPos.y
        let w = this.mouse.position.x - this.mouse.tempPos.x
        let t = this.mouse.tempPos.y
        let l = this.mouse.tempPos.x
        if (h >= 0 && w < 0) {
          w = -w
          l -= w
        } else if (h < 0 && w >= 0) {
          h = -h
          t -= h
        } else if (h < 0 && w < 0) {
          h = -h
          w = -w
          t -= h
          l -= w
        }
        this.rectangleMultiple.height = h
        this.rectangleMultiple.width = w
        this.rectangleMultiple.position.top = t
        this.rectangleMultiple.position.left = l
      }
    },
    mouseupHandler () {
      if (this.container.draging) this.container.draging = false
      if (this.rectangleMultiple.multipling) {
        this.judgeSelectedNode()
        this.rectangleMultiple.multipling = false
        this.rectangleMultiple.width = 0
        this.rectangleMultiple.height = 0
      }
    },
    judgeSelectedNode () {
      let ay = this.rectangleMultiple.position.top
      let ax = this.rectangleMultiple.position.left
      let by = ay + this.rectangleMultiple.height
      let bx = ax + this.rectangleMultiple.width

      let nodeList = this.flowData.nodeList
      nodeList.forEach((node, index) => {
        if (node.y >= ay && node.x >= ax && node.y <= by && node.x <= bx) {
          this.plumb.addToDragSelection(node.id)
          this.currentSelectGroup.push(node)
        }
      })
    },
    scaleContainer (e) {
      let event = window.event || e
      if (this.container.scaleFlag) {
        if (this.browserType === 2) {
          if (event.detail < 0) {
            this.enlargeContainer()
          } else {
            this.narrowContainer()
          }
        } else {
          if (event.deltaY < 0) {
            this.enlargeContainer()
          } else if (this.container.scale) {
            this.narrowContainer()
          }
        }
      }
    },
    enlargeContainer () {
      this.container.scaleOrigin.x = this.mouse.position.x
      this.container.scaleOrigin.y = this.mouse.position.y
      let newScale = eventMethod.add(
        this.container.scale,
        flowConfig.defaultStyle.containerScale.onceEnlarge
      )
      if (newScale <= flowConfig.defaultStyle.containerScale.max) {
        this.container.scale = newScale
        this.container.scaleShow = eventMethod.mul(this.container.scale, 100)
        this.plumb.setZoom(this.container.scale)
      }
    },
    narrowContainer () {
      this.container.scaleOrigin.x = this.mouse.position.x
      this.container.scaleOrigin.y = this.mouse.position.y
      let newScale = eventMethod.sub(
        this.container.scale,
        flowConfig.defaultStyle.containerScale.onceNarrow
      )
      if (newScale >= flowConfig.defaultStyle.containerScale.min) {
        this.container.scale = newScale
        this.container.scaleShow = eventMethod.mul(this.container.scale, 100)
        this.plumb.setZoom(this.container.scale)
      }
    },
    showContainerContextMenu (e) {
      let event = window.event || e
      event.preventDefault()
      $('.vue-contextmenuName-node-menu').css('display', 'none')
      $('.vue-contextmenuName-link-menu').css('display', 'none')
      this.selectContainer()
      let x = event.clientX
      let y = event.clientY
      this.containerContextMenuData.axis = { x, y }
    },
    showNodeContextMenu (e) {
      let event = window.event || e
      event.preventDefault()
      $('.vue-contextmenuName-flow-menu').css('display', 'none')
      $('.vue-contextmenuName-link-menu').css('display', 'none')
      let x = event.clientX
      let y = event.clientY
      this.nodeContextMenuData.axis = { x, y }
    },
    flowInfo () {
      let nodeList = this.flowData.nodeList
      let linkList = this.flowData.linkList
      alert(
        '当前流程图中有 ' +
          nodeList.length +
          ' 个节点，有 ' +
          linkList.length +
          ' 条连线。'
      )
    },
    paste () {
      let dis = 0
      this.clipboard.forEach((node, index) => {
        let newNode = Object.assign({}, node)
        newNode.id = newNode.type + '-' + eventMethod.getId()
        let nodePos = this.computeNodePos(
          this.mouse.position.x + dis,
          this.mouse.position.y + dis
        )
        newNode.x = nodePos.x
        newNode.y = nodePos.y
        dis += 20
        this.flowData.nodeList.push(newNode)
      })
    },
    selectAll () {
      this.flowData.nodeList.forEach((node, index) => {
        this.plumb.addToDragSelection(node.id)
        this.currentSelectGroup.push(node)
      })
    },
    saveFlow () {
      this.$emit('saveFlow')
    },
    checkAlign () {
      if (this.currentSelectGroup.length < 2) {
        this.$message.error('请选择至少两个节点！')
        return false
      }
      return true
    },
    verticaLeft () {
      if (!this.checkAlign()) return
      let nodeList = this.flowData.nodeList
      let selectGroup = this.currentSelectGroup
      let baseX = selectGroup[0].x
      let baseY = selectGroup[0].y
      for (let i = 1; i < selectGroup.length; i++) {
        baseY =
          baseY +
          selectGroup[i - 1].height +
          flowConfig.defaultStyle.alignSpacing.vertical
        let f = nodeList.filter((n) => n.id === selectGroup[i].id)[0]
        f.tx = baseX
        f.ty = baseY
        this.plumb.animate(
          selectGroup[i].id,
          { top: baseY, left: baseX },
          {
            duration: flowConfig.defaultStyle.alignDuration,
            complete: () => {
              f.x = f.tx
              f.y = f.ty
            },
          }
        )
      }
    },
    verticalCenter () {
      if (!this.checkAlign()) return
      let nodeList = this.flowData.nodeList
      let selectGroup = this.currentSelectGroup
      let baseX = selectGroup[0].x
      let baseY = selectGroup[0].y
      let firstX = baseX
      for (let i = 1; i < selectGroup.length; i++) {
        baseY =
          baseY +
          selectGroup[i - 1].height +
          flowConfig.defaultStyle.alignSpacing.vertical
        baseX =
          firstX +
          eventMethod.div(selectGroup[0].width, 2) -
          eventMethod.div(selectGroup[i].width, 2)
        let f = nodeList.filter((n) => n.id === selectGroup[i].id)[0]
        f.tx = baseX
        f.ty = baseY
        this.plumb.animate(
          selectGroup[i].id,
          { top: baseY, left: baseX },
          {
            duration: flowConfig.defaultStyle.alignDuration,
            complete: () => {
              f.x = f.tx
              f.y = f.ty
            },
          }
        )
      }
    },
    verticalRight () {
      if (!this.checkAlign()) return
      let nodeList = this.flowData.nodeList
      let selectGroup = this.currentSelectGroup
      let baseX = selectGroup[0].x
      let baseY = selectGroup[0].y
      let firstX = baseX
      for (let i = 1; i < selectGroup.length; i++) {
        baseY =
          baseY +
          selectGroup[i - 1].height +
          flowConfig.defaultStyle.alignSpacing.vertical
        baseX = firstX + selectGroup[0].width - selectGroup[i].width
        let f = nodeList.filter((n) => n.id === selectGroup[i].id)[0]
        f.tx = baseX
        f.ty = baseY
        this.plumb.animate(
          selectGroup[i].id,
          { top: baseY, left: baseX },
          {
            duration: flowConfig.defaultStyle.alignDuration,
            complete: () => {
              f.x = f.tx
              f.y = f.ty
            },
          }
        )
      }
    },
    levelUp () {
      if (!this.checkAlign()) return
      let nodeList = this.flowData.nodeList
      let selectGroup = this.currentSelectGroup
      let baseX = selectGroup[0].x
      let baseY = selectGroup[0].y
      for (let i = 1; i < selectGroup.length; i++) {
        baseX =
          baseX +
          selectGroup[i - 1].width +
          flowConfig.defaultStyle.alignSpacing.level
        let f = nodeList.filter((n) => n.id === selectGroup[i].id)[0]
        f.tx = baseX
        f.ty = baseY
        this.plumb.animate(
          selectGroup[i].id,
          { top: baseY, left: baseX },
          {
            duration: flowConfig.defaultStyle.alignDuration,
            complete: () => {
              f.x = f.tx
              f.y = f.ty
            },
          }
        )
      }
    },
    levelCenter () {
      if (!this.checkAlign()) return
      let nodeList = this.flowData.nodeList
      let selectGroup = this.currentSelectGroup
      let baseX = selectGroup[0].x
      let baseY = selectGroup[0].y
      let firstY = baseY
      for (let i = 1; i < selectGroup.length; i++) {
        baseY =
          firstY +
          eventMethod.div(selectGroup[0].height, 2) -
          eventMethod.div(selectGroup[i].height, 2)
        baseX =
          baseX +
          selectGroup[i - 1].width +
          flowConfig.defaultStyle.alignSpacing.level
        let f = nodeList.filter((n) => n.id === selectGroup[i].id)[0]
        f.tx = baseX
        f.ty = baseY
        this.plumb.animate(
          selectGroup[i].id,
          { top: baseY, left: baseX },
          {
            duration: flowConfig.defaultStyle.alignDuration,
            complete: () => {
              f.x = f.tx
              f.y = f.ty
            },
          }
        )
      }
    },
    levelDown () {
      if (!this.checkAlign()) return
      let nodeList = this.flowData.nodeList
      let selectGroup = this.currentSelectGroup
      let baseX = selectGroup[0].x
      let baseY = selectGroup[0].y
      let firstY = baseY
      for (let i = 1; i < selectGroup.length; i++) {
        baseY = firstY + selectGroup[0].height - selectGroup[i].height
        baseX =
          baseX +
          selectGroup[i - 1].width +
          flowConfig.defaultStyle.alignSpacing.level
        let f = nodeList.filter((n) => n.id === selectGroup[i].id)[0]
        f.tx = baseX
        f.ty = baseY
        this.plumb.animate(
          selectGroup[i].id,
          { top: baseY, left: baseX },
          {
            duration: flowConfig.defaultStyle.alignDuration,
            complete: () => {
              f.x = f.tx
              f.y = f.ty
            },
          }
        )
      }
    },
    addRemark () {
      alert('添加备注(待完善)...')
    },
    copyNode () {
      this.clipboard = []
      if (this.currentSelectGroup.length > 0) {
        this.clipboard = Object.assign([], this.currentSelectGroup)
      } else if (this.currentSelect.id) {
        this.clipboard.push(this.currentSelect)
      }
    },
    getConnectionsByNodeId (nodeId) {
      let conns1 = this.plumb.getConnections({
        source: nodeId,
      })
      let conns2 = this.plumb.getConnections({
        target: nodeId,
      })
      return conns1.concat(conns2)
    },
    // 删除节点
    deleteNode () {
      console.log('删除节点')
      const that = this
      let nodeList = that.flowData.nodeList
      let linkList = that.flowData.linkList
      let arr = []

      arr.push(Object.assign({}, that.currentSelect))
      // arr.forEach(function (c, index) {
      let conns = that.getConnectionsByNodeId(that.currentSelect.id)
      conns.forEach(function (conn, index) {
        linkList.splice(linkList.findIndex(link => (link.sourceId === conn.sourceId || link.targetId === conn.targetId)), 1)
      })
      that.plumb.deleteEveryEndpoint()
      let inx = nodeList.findIndex(node => node.id === that.currentSelect.id)
      nodeList.splice(inx, 1)
      that.$nextTick(() => {
        linkList.forEach(function (link, index) {
          // if (link.percent !== undefined && link.percent !== '0.00%') {
          that.listArr.push(link)
          let conn = that.plumb.connect({
            connTypes: link.type,
            percent: link.percent,
            bizScene: link.bizScene,
            bizSceneDesc: link.bizSceneDesc,
            source: link.sourceId,
            target: link.targetId,
            anchor: flowConfig.jsPlumbConfig.anchor.default,
            connector: [
              link.cls.linkType,
              {
                gap: 5,
                cornerRadius: 8,
                alwaysRespectStubs: true
              }
            ],
            paintStyle: {
              stroke: link.cls.linkColor,
              strokeWidth: link.cls.linkThickness
            }
          })
          if (conn) {
            conn.setLabel({
              label: link.percent,
              cssClass: 'linkLabel'
            })
          }
          // }
        })
        let arr1 = linkList
        let arr2 = []
        for (let i = 0; i < arr1.length; i++) {
          const element = arr1[i]
          for (let j = 0; j < that.listArr.length; j++) {
            const ele = that.listArr[j]
            console.log(element.id, '===', ele.id)
            if (element.id === ele.id) {
              arr2.push(ele)
            }
          }
        }
        that.flowData.linkList = arr2
        console.log(arr2, that.flowData.linkList)
        console.log(that.listArr, 'that.listArr', linkList)
      })
      // })
      that.selectContainer()
    },
    // 新增节点
    addNewNode (node) {
      let x = this.mouse.position.x
      let y = this.mouse.position.y
      let nodePos = this.computeNodePos(x, y)
      x = nodePos.x
      y = nodePos.y
      // 节点表单
      let newNode = Object.assign({}, node)
      newNode.id = newNode.type + '-' + eventMethod.getId()
      newNode.height = 50
      newNode.callIndex = null
      newNode.callChannelImpl = ''
      newNode.callChannelImplDesc = ''
      newNode.registerPayOrderFlag = ''
      newNode.channelCallMode = ''
      newNode.syncCallFlag = ''
      newNode.syncWaitResult = ''
      newNode.syncQueryGapType = ''
      newNode.syncQueryRepeat_num = null
      newNode.syncQueryRepeatTime = null
      newNode.syncResultService_name = ''
      newNode.impactTxnFlag = ''
      newNode.recordStatus = ''
      if (
        newNode.type === 'start' ||
        newNode.type === 'end' ||
        newNode.type === 'event' ||
        newNode.type === 'gateway'
      ) {
        newNode.x = x - 25
        newNode.width = 50
      } else {
        newNode.x = x - 60
        newNode.width = 120
      }
      newNode.y = y - 25
      if (newNode.type === 'x-lane') {
        newNode.height = 200
        newNode.width = 600
      } else if (newNode.type === 'y-lane') {
        newNode.height = 600
        newNode.width = 200
      }
      this.flowData.nodeList.push(newNode)
    },
    computeNodePos (x, y) {
      const pxx = flowConfig.defaultStyle.alignGridPX[0]
      const pxy = flowConfig.defaultStyle.alignGridPX[1]
      if (x % pxx) x = pxx - (x % pxx) + x
      if (y % pxy) y = pxy - (y % pxy) + y
      return {
        x: x,
        y: y,
      }
    },
    containerHandler () {
      this.selectContainer()
      let toolType = this.currentTool.type
      if (toolType === 'zoom-in') {
        this.enlargeContainer()
      } else if (toolType === 'zoom-out') {
        this.narrowContainer()
      }
    },
    selectContainer () {
      this.currentSelect = {}
      this.$emit('getShortcut')
    },
    isMultiple (callback) {
      callback(this.rectangleMultiple.flag)
    },
    updateNodePos () {
      let nodeList = this.flowData.nodeList
      this.currentSelectGroup.forEach((node, index) => {
        let l = parseInt($('#' + node.id).css('left'))
        let t = parseInt($('#' + node.id).css('top'))
        let f = nodeList.filter((n) => n.id === node.id)[0]
        f.x = l
        f.y = t
      })
    },
    alignForLine (e) {
      if (this.selectGroup.length > 1) return
      if (this.container.auxiliaryLine.controlFnTimesFlag) {
        let elId = e.el.id
        let nodeList = this.flowData.nodeList
        nodeList.forEach((node, index) => {
          if (elId !== node.id) {
            let dis = flowConfig.defaultStyle.showAuxiliaryLineDistance
            let elPos = e.pos
            let elH = e.el.offsetHeight
            let elW = e.el.offsetWidth
            let disX = elPos[0] - node.x
            let disY = elPos[1] - node.y
            if (
              (disX >= -dis && disX <= dis) ||
              (disX + elW >= -dis && disX + elW <= dis)
            ) {
              this.container.auxiliaryLine.isShowYLine = true
              this.auxiliaryLinePos.x = node.x + this.container.pos.left
              let nodeMidPointX = node.x + node.width / 2
              if (nodeMidPointX === elPos[0] + elW / 2) {
                this.auxiliaryLinePos.x =
                  nodeMidPointX + this.container.pos.left
              }
            }
            if (
              (disY >= -dis && disY <= dis) ||
              (disY + elH >= -dis && disY + elH <= dis)
            ) {
              this.container.auxiliaryLine.isShowXLine = true
              this.auxiliaryLinePos.y = node.y + this.container.pos.top
              let nodeMidPointY = node.y + node.height / 2
              if (nodeMidPointY === elPos[1] + elH / 2) {
                this.auxiliaryLinePos.y =
                  nodeMidPointY + this.container.pos.left
              }
            }
          }
        })
        this.container.auxiliaryLine.controlFnTimesFlag = false
        setTimeout(() => {
          this.container.auxiliaryLine.controlFnTimesFlag = true
        }, 200)
      }
    },
    hideAlignLine () {
      if (this.container.auxiliaryLine.isOpen) {
        this.container.auxiliaryLine.isShowXLine = false
        this.container.auxiliaryLine.isShowYLine = false
      }
    },
  },
  watch: {
    select (val) {
      this.currentSelect = val
      if (this.tempLinkId !== '') {
        $('#' + this.tempLinkId).removeClass('link-active')
        this.tempLinkId = ''
      }
      if (this.currentSelect.type === 'connScene') {
        this.tempLinkId = this.currentSelect.id
        $('#' + this.currentSelect.id).addClass('link-active')
      }
    },
    currentSelect: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true,
    },
    selectGroup (val) {
      this.currentSelectGroup = val
      if (this.currentSelectGroup.length <= 0) this.plumb.clearDragSelection()
    },
    currentSelectGroup: {
      handler (val) {
        this.$emit('update:selectGroup', val)
      },
      deep: true,
    },
  },
}
</script>

<style lang="less" scoped>
@import "../../../static/less/flow-area.less";
</style>
<style lang="less">
.link-active {
    outline: 2px dashed #409EFF;
}
</style>
